<template>
    <div>
        <StudentForm @onAddStudent="onAddStudent" @onUpdateStudent="onUpdateStudent" :updateStudent="updateStudent" />
        <StudentTable :studentData="studentData" @onDeleteStudent="onDeleteStudent"
            @onGetUpdateStudent="onGetUpdateStudent" />
    </div>
</template>

<script setup>
import { ref } from 'vue';
import StudentForm from './StudentForm.vue'
import StudentTable from './StudentTable.vue'

const studentData = ref([
    { id: 1, name: '张三', age: 20 },
    { id: 2, name: '李四', age: 20 },
    { id: 3, name: '张三', age: 20 },
])
const updateStudent = ref({});

function onDeleteStudent(studentId) {
    studentData.value = studentData.value.filter(item => {
        return item.id !== studentId
    })
}

function onAddStudent(studentItem) {
    studentData.value.push({
        id: Date.now(),
        ...studentItem
    });
}

function onUpdateStudent(studentItem) {
    studentData.value = studentData.value.map(item => {
        if (item.id == studentItem.id) {
            return studentItem;
        }
        return item;
    })
}

function onGetUpdateStudent(updateItem) {
    updateStudent.value = { ...updateItem };
}

</script>

<style scoped></style>